import { defineComponent, onMounted, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import {
  EditOutlined,
} from "@ant-design/icons-vue";
import productAttributesService from "@/modules/productManage/productAttributes.service";
import EditPopup from "./editPopup/editPopup";
export default defineComponent({
  name: 'productAttributesPage',
  setup() {
    const state = reactive({
      toolbar: {
        left: ["refresh", "add"],
        right: ["filter"],
        add: {
          handler: () => {
            editRef.value.open();
          }
        }
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          align: "center",
          width: "100px",
        },
        {
          title: "险种名称",
          dataIndex: "insurance_name",
          align: "center",
          width: "200px",
        },
        {
          title: "属性",
          dataIndex: 'attr_list',
          align: "center",
          width: "200px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    const LTableRef = ref(null as any);
    const $service = new productAttributesService();
    const editRef = ref(null as any);
    return () => (
      <Page>
        <CardWithTitle title="险种属性">
          <LTable
            ref={LTableRef}
            toolbar={state.toolbar}
            service={$service}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              loading={state.loading}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //操作
                  if (column.dataIndex === "operation") {
                    return (
                      <a-button
                        type="primary"
                        size="small"
                        v-slots={{
                          icon: () => <EditOutlined />,
                        }}
                        onClick={() => {
                          editRef.value.open(record);
                        }}
                      >
                        编辑
                      </a-button>
                    )
                  }
                  if (column.dataIndex === 'attr_list') {
                    return (
                      record.attr_list.map((x: any) => <span>{x.name}&nbsp;<span>;</span></span>)
                    )
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <EditPopup
          ref={editRef}
          service={$service}
          onConfirm={() => { LTableRef.value.$fetchTableData(); }}
        />
      </Page>
    )
  }
})